<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .confirmCode {
            background-color: skyblue;
            /* color: white; */
            font-style: oblique;
        }
    </style>
</head>

<body>

    请输入用户名：<input type="text" name="username" id="uname">
    <span class="nametext">用户名由数字、字母（区分大小写）的3-6位数据构成，且数字不可开头</span>
    <br>

    请输入密码鸭：<input type="text" name="password" id="pd">
    <span class="pdtext">密码由数字、字母（区分大小写）的3-6位数据构成</span>
    <br>

    请输入验证码：<input type="text" class="code">
    <span class="confirmCode">点击刷新验证码</span>

    <span class="yanzheng">按照验证码填写</span>
    <br />

    <button class="btn">提交</button>

    <script>

        var arrNum = [];
        for (var m = 0; m < 10; m++) {
            arrNum.push(m + "");
        }
        // console.log(arrNum);

        var arrUpper = [];
        for (var m = 97; m <= 122; m++) {
            arrUpper.push(String.fromCharCode(m));
        }
        // console.log(arrUpper);

        var arrLower = [];
        for (var m = 65; m <= 90; m++) {
            arrLower.push(String.fromCharCode(m));
        }
        // console.log(arrLower);

        var arr = arrNum.concat(arrUpper, arrLower);

        function randNum(min, max) {
            min = min || 0;
            return parseInt(Math.random() * (max - min) + min);
        }

        function randomCode(n) {
            n = n || 4;
            var res = "";
            res += arrNum[randNum(0, arrNum.length)];
            res += arrUpper[randNum(0, arrUpper.length)];
            res += arrLower[randNum(0, arrLower.length)];

            for (var m = 0; m < n - 3; m++) {
                res += arr[randNum(0, arr.length)];
            }

            var newarr = res.split("");

            newarr.forEach(function (item, m) {
                var randnum = randNum(0, newarr.length);
                var num = newarr[m];
                newarr[m] = newarr[randnum];
                newarr[randnum] = num;
            })
            var newstr = newarr.join("");
            // console.log(res);
            // console.log(newarr);
            // console.log(newstr);
            return newstr;
            // document.querySelector(".code").value = newstr;
        }
        // console.log(randomCode(4));
        // 点击验证码span，刷新验证码
        document.querySelector(".confirmCode").onclick = function () {
            document.querySelector(".confirmCode").innerHTML = randomCode()


        }

        // 验证码框
        // 点击提交按钮，通过或者不通过验证
        document.querySelector(".btn").addEventListener("click", function () {
            // 获取验证码输入框的值
            var code = document.querySelector(".code").value;
            // 不区分大小写的条件下，判断span验证码与用户输入的验证码是否相等
            if (code.toLowerCase() == document.querySelector(".confirmCode").innerHTML.toLowerCase()) {
                // 若相等，则显示验证通过且字体颜色变蓝色
                document.querySelector(".yanzheng").innerHTML = "验证通过";
                document.querySelector(".yanzheng").style.color = "blue";
                // 若不相等，则刷新验证码并清空验证码输入框内容
            } else {
                document.querySelector(".yanzheng").innerHTML = "验证不通过，请重新输入";
                document.querySelector(".yanzheng").style.color = "red";
                document.querySelector(".confirmCode").innerHTML = randomCode();
                document.querySelector(".code").value = "";
                // console.log(arr);
            }
        })

        // 用户框
        // 点击提交按钮，对用户名输入框进行操作
        document.querySelector(".btn").addEventListener("click", function () {
            // 获取用户框值并清空输入值的首尾空格
            var username = document.querySelector("#uname").value.trim();
            var usertext = document.querySelector(".nametext");


            // 用户名不为空
            if (username.length === 0) {
                usertext.innerHTML = "用户名不能为空";
                usertext.style.color = "red";
                return;
            }

            // 用户名长度应该为3-6
            if (username.length < 3 || username.length > 6) {
                usertext.innerHTML = "用户名长度不对";
                usertext.style.color = "red";
                return;
            }

            // 用户名不以数字开头
            if (arrNum.includes(username.charAt(0))) {
                usertext.innerHTML = "不能以数字开头";
                usertext.style.color = "red";
                return;
            }


            for (var m = 0; m < username.length; m++) {
                // 用户名含有非法字符
                if (!arr.includes(username[m])) {
                    usertext.innerHTML = "用户名含有非法字符";
                    usertext.style.color = "red";
                    console.log(arr.includes(username[m]))
                    return;
                }

                // 用户名合法
                if (arr.includes(username[m])) {
                    usertext.innerHTML = "√";
                    usertext.style.color = "green";
                    // return;

                    // if (arrNum.indexOf(username[m]) >= 0) {
                    //     usertext.innerHTML = "用户名不可全为数字";
                    //     usertext.style.color = "red";
                    //     // if(arrUpper.indexOf)
                    // }

                    // 用户名合法但是不建议都是小写字母
                    // if (arrUpper.indexOf(username[m]) >= 0) {
                    //     usertext.innerHTML = "用户名不可全为小写字母";
                    //     usertext.style.color = "red";
                    // }

                    // // 用户名合法但是不建议都是大写字母
                    // if (arrLower.indexOf(username[m]) >= 0) {
                    //     usertext.innerHTML = "用户名不可全为大写字母";
                    //     usertext.style.color = "red";
                    // }
                }
            }
        })

        // 密码框

        document.querySelector(".btn").addEventListener("click", function () {
            //  获取密码框值并清空输入值的首尾空格
            var userpd1 = document.querySelector("#pd");
            var userpd = userpd1.value.trim();
            var pdtext = document.querySelector(".pdtext");

            // 密码不为空
            if (userpd.length === 0) {
                pdtext.innerHTML = "密码不能为空";
                pdtext.style.color = "red";
                return;
            }

            // 密码长度不对
            if (userpd.length < 3 || userpd.length > 6) {
                pdtext.innerHTML = "密码长度不对";
                pdtext.style.color = "red";
                return;
            }

            //  // 密码输出
            if (userpd.length >= 3 && userpd.length <= 6) {
                // 给三个数
                var num = 0;
                var upper = 0;
                var lower = 0;

                for (var m = 0; m < userpd.length; m++) {
                    // 密码合法则遍历密码每个值
                    if (arr.includes(userpd[m])) {
                        // 用ASCII值判断密码的每个值是哪个类型
                        var x = userpd.charCodeAt(m)
                        // console.log(x);
                        // if(password>=0&&password<=9)
                        if (x >= 48 && x <= 57) {
                            // 为数字
                            num = 1;
                            // console.log(333);
                        } else if (x >= 65 && x <= 90) {
                            // 为大写字母
                            upper = 1;
                        } else if (x >= 97 && x <= 122) {
                            // 为小写字母
                            lower = 1;
                        }
                    }
                }

                // 用sum的值去算密码值的类型
                var sum = num + upper + lower;
                console.log(sum);
                // console.log(sum);
                // 三种类型全占则强
                if (sum === 3) {
                    pdtext.innerHTML = "密码强度强";
                    pdtext.style.color = "green";
                    return;
                    // 占两种类型则中
                } else if (sum === 2) {
                    pdtext.innerHTML = "密码强度中";
                    pdtext.style.color = "skyblue";
                    return;
                    // 只占一种则弱
                } else if (sum === 1) {
                    pdtext.innerHTML = "密码强度低";
                    pdtext.style.color = "blueviolet";
                    return;
                }

            }
        })



























    </script>
</body>

</html>